<template>
  <div>
      <!-- 第一种方法直接$store.state.count导入 -->
      <!-- <h3>当前最新的count的值: {{$store.state.count}}</h3> -->
      <h3>{{$store.getters.showNum}}</h3>
      <button @click="btnhandel1">+1</button>
      <button @click="btnhandel2">+addN</button>
      <button @click="btnhandel3">+1 Async</button>
      <button @click="btnhandel4">+addN Async</button>
  </div>
</template>

<script>
export default {
  data () {
      return {}
  },
  methods: {
      btnhandel1() {
          // 触发mutations的第一种方式
          this.$store.commit('add')
      },
      btnhandel2() {
          // 在触发count函数时
          // 触发 mutations 是携带的参数
          this.$store.commit('addN', 3)
          // 定时器
        //   setTimeout(() => {
        //       this.$store.commit('addN', 3)
        //   }, 3000);
      },
      btnhandel3() {
          // 异步地址 count 自增 +1
          // 这里的 dispatch 函数 是专门触发 action
          this.$store.dispatch('addAsync')
      },
      btnhandel4() {
          // 在触发count函数时
          // 触发 mutations 时携带的参数
          this.$store.dispatch('addNAsync', 5)
      }
  }
}
</script>

<style lang="less" scoped>
</style>
